<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="http:////at.alicdn.com/t/font_1190625_n3wlu0ewu1n.css">
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../css/config.css">
    <title>订单详情</title>
    <style>
        html,body{
            background-color: #F5F5F9;
        }
        .header{
            z-index: 100;
        }
        .main{
            padding-bottom: .54rem; 
        }
        .order_status{
            width: 100%;
            height: .54rem;
            background-color: #fff;
            padding: 0 .14rem;
            margin-top: 1px;
        }
        .order_status .left{
            font-size: .14rem;
            color: #333;
        }
        .order_status .left i{
            font-size: .25rem;
        }
        .order_status .left span{
            font-size: .14rem;
            color: #333;
            font-weight: bold;
            margin-left: .08rem;
        }
        .order_status .right{
            font-size: .16rem;
            font-weight: bold;
            color: #9c53f6;
        }
        .choseAddress{
            width: 100%;
            margin-top: .09rem;
            background-color: #fff;
            overflow: hidden;
        }
        .choseAddress .noAddress{
            width: 100%;
            height: 1.28rem;
            font-size: .14rem;
            color: #999;
            padding: 0 .15rem;
        }
        .choseAddress .noAddress i{
            font-size: .14rem;
        }
        .choseAddress .hasAddress{
            width: 100%;
            padding: 0 .15rem;
            height: 1.28rem;
            position: relative;
            overflow: hidden;
        }
        .choseAddress .hasAddress >div{
            width: 100%;
            height: .18rem;
            margin-top: .12rem;
            line-height: .18rem;
        }
        .choseAddress .hasAddress span{
            display: block;
            width: .42rem;
            float: left;
            text-align: left;
            font-size: .14rem;
            color: #999;
        }
        .choseAddress .hasAddress .text{
            width: 2.85rem;
            height: .18rem;
            line-height: .18rem;
            float: left;
            font-size: .16rem;
            color: #333;
        }
        .choseAddress .hasAddress .address_dtl{
            width: 2.85rem;
            height: .4rem;
            line-height: .2rem;
            float: left;
            font-size: .16rem;
            color: #333;
        }
        .choseAddress .hasAddress .gengduo{
            width: .15rem;
            height: 100%;
            margin-top: 0;
            line-height: 1.28rem;
            position: absolute;
            right: .15rem;
            top: 0;
            color: #AAAAAA;
        }
        .choseAddress .bg-deng{
            width:100%;
            height: .02rem;
            background-image: url('../../image/order_detail_bottom.png');
            background-repeat: repeat;
            background-size: 100% 100%;
        }
        .gl_list{
            width: 100%;
            height: auto;
            margin-top: .1rem;
            background-color: #fff;
        }
        .gl_list .goods_list{
            width: 100%;
            overflow: hidden;
        }
        .gl_list .goods_list .gds{
            width: 100%;
            height: auto;
            padding: 0 .14rem;
            margin-bottom: .19rem;
            overflow: hidden;
        }
        .gl_list .goods_list .gds:first-child{
            margin-top: .2rem;
        }
        .gl_list .goods_list .gds:last-child{
           border-bottom: 1px solid #eee;
           margin-bottom: 0;
        }
        .gl_list .goods_list  .gds:last-child .right{
            border-bottom: 0;
        }
        .gl_list .goods_list  .gds > img{
            width: .74rem;
            height: .74rem;
            border-radius: .03rem;
            float: left;
        }
        .gl_list .goods_list  .gds .right{
            width: 2.65rem;
            height: .93rem;
            float: right;
            padding-bottom: .19rem;
            border-bottom: 1px solid #eee;
        }
        .gl_list .goods_list  .gds .right .desc{
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .14rem;
            color: #333;
            font-weight: bold;
        }
        .gl_list .goods_list  .gds .right .guige{
            width: 100%;
            font-size: .12rem;
            color: #999;
        }
        .gl_list .goods_list  .gds .right .price{
            width: 100%;
            height: .16rem;
            line-height: .16rem;
            font-size: .14rem;
            color: #333;
            text-align: right;
            position: relative;
            top: 0.06rem;
        }
        .yunfei{
            width: 100%;
            height: .41rem;
            padding: 0 .14rem;
            font-size: .12rem;
            color: #333;
            border-bottom: 1px solid #eee;
        }
        .yunfei .left{
            font-size: .12rem;
            color: #999;
        }
        .total_price{
            width: 100%;
            height: .52rem;
            padding: 0 .14rem;
            font-size: .12rem;
            color: #333;
        }
        .total_price .b{
            font-size: .16rem;
            color: #333;
            font-weight: bold;
        }
        .bg-zi{
            width: .02rem;
            height: .14rem;
            background-color: #9C53F6;
        }
        .beizhu{
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-top: .1rem;
            padding: 0 .14rem;
            background-color: #fff;
        }
        .beizhu .title{
            width: 100%;
            margin-top: .15rem;
            margin-bottom: .15rem;
        }
        .beizhu .title span{
            font-size: .14rem;
            color: #333;
            font-weight: bold;
            margin-left: .08rem;
        }
        .beizhu .text{
            font-size: .12rem;
            color: #999;
            margin-bottom: .14rem;
        }
        .beizhu .list{
            width: 100%;
            overflow: hidden;
        }
        .beizhu .list .item{
            width: 100%;
            margin-bottom: .1rem;
        }
        .beizhu .list .item span:first-child{
            font-size: .14rem;
            color: #999;
        }
        .beizhu .list .item span:last-child{
            font-size: .14rem;
            color: #333333;
        }
        .beizhu .list .item:last-child{
            margin-bottom: .14rem;
        }
        .detail_btn{
           width: 100%;
           height: .44rem;
           background-color: #fff;
           position: fixed;
           bottom: 0;
        }
        .btn-double{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .btn-double > div{
            width: 50%;
            height: 100%;
            text-align: center;
            line-height: .44rem;
            float: left;
            font-size: .16rem;
            font-weight: bold;
        }
        .btn-double .a{
            color: #666;
        }
        .btn-double .b{
            color: #fff;
        }
        .btn-single{
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: .44rem;
            font-size: .16rem;
            color: #666;
            font-weight: bold;
        }
        .btn-hui{
            background-color: #D8D8D8;
            color: #fff;
        }
        .layer{
            width: 3.47rem;
            height: auto;
            /* max-height: 2.52rem; */
            position: fixed;
            top: 35%;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 996;
            background-color: #fff;
            border-radius: .04rem;
        }
        .layer .title{
            width: 100%;
            font-size: .18rem;
            color: #333;
            font-weight: bold;
            text-align: center;
            margin-top: .3rem;
        }
        .layer .text{
            width: 100%;
            color: #999;
            font-size: .12rem;
            text-align: center;
            margin-top: .1rem;
        }
        .layer-btn{
            width: 100%;
            height: .45rem;
            margin-top: .15rem;
            margin-bottom: .15rem;
        }
        .layer-btn .btn-left{
            width: 1.19rem;
            height: .42rem;
            line-height: .42rem;
            text-align: center;
            border-radius: .21rem;
            border: 1px solid #aaa;
            font-size: .16rem;
            color: #666;
            font-weight: bold;
        }
        .layer-btn .btn-right{
            width: 1.19rem;
            height: .42rem;
            text-align: center;
            line-height: .42rem;
            border-radius: .21rem;
            font-size: .16rem;
            color: #fff;
            font-weight: bold;
        }
        .layer-textarea{
            width: 2.97rem;
            height: .78rem;
            padding: .13rem .14rem;
            margin: .2rem auto 0; 
            background-color: #f5f5f9;
        }
        #tuiRefult::-moz-placeholder{color:#999999;}              
        #tuiRefult::-webkit-input-placeholder{color:#999999;}     
        #tuiRefult:-ms-input-placeholder{color:#999999;} 
        #tuiRefult{
            width: 2.65rem;
            height: .52rem;  
            font-size: .14rem;
            color: #333;
            border-radius: .02rem;
            background-color: #f5f5f9;
        }
    </style>
</head>
<body>
    <header class="header mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">订单详情</h1>
    </header>
    <div class="main">
        <div class="order_status flex space-between align-items">
            <div class="left flex align-items"><i class="iconfont icon-74wodedingdan"></i><span>订单状态</span></div>
            <div class="right">待付款</div>
        </div>
        <div class="choseAddress">
            <div class="hasAddress">
                <div class="user_name">
                    <span>姓名:</span>
                    <div class="text">张先生</div>
                </div>
                <div class="uset_phone">
                    <span>电话:</span>
                    <div class="text">15688888888</div>
                </div>
                <div class="user_address">
                    <span>地址:</span>
                    <div class="address_dtl ellipsis2">郑州市二七区南三环连云路橄榄城都市广场B座6楼603</div>
                </div>
                <div class="gengduo"><i class="iconfont icon-gengduo"></i></div>
            </div>
            <div class="bg-deng"></div>
        </div>
        <div class="gl_list">
            <div class="goods_list">
                <div class="gds">
                    <img src="../../image/order_goods.png">
                    <div class="right flex flex_wrap align-content-stretch">
                        <div class="desc">倩碧（CLINIQUE）卓越润肤乳125m倩碧（CLINIQUE）卓越润肤乳125m倩碧（CLINIQUE）卓越润肤乳125m</div>
                        <div class="guige "><span>无油黄油套装</span></div>
                        <div class="price flex space-between align-items">￥249.00<span>x1</span></div>
                    </div>
                </div>
                <div class="gds">
                    <img src="../../image/order_goods.png">
                    <div class="right flex flex_wrap align-content-stretch">
                        <div class="desc">倩碧（CLINIQUE）卓越润肤乳125m倩碧（CLINIQUE）卓越润肤乳125m倩碧（CLINIQUE）卓越润肤乳125m</div>
                        <div class="guige"><span>无油黄油套装</span></div>
                        <div class="price flex space-between align-items">￥249.00<span>x1</span></div>
                    </div>
                </div>
            </div>
            <div class="yunfei flex space-between align-items">
                <span class="left">运费</span>
                <span>￥0.00</span>
            </div>
            <div class="total_price flex align-items flex_end">
                共<span class="a">2</span>件商品&nbsp;&nbsp;&nbsp;合计金额：<span class="b app-price-Color">￥503.00</span> 
            </div>
        </div>
        <div class="beizhu">
            <div class="title flex flex_start align-items"><div class="bg-zi"></div><span>备注信息</span></div>
            <div class="text">记得要橙色的，不要发错了哦!</div>
        </div>
        <div class="beizhu">
            <div class="title flex flex_start align-items"><div class="bg-zi"></div><span>订单信息</span></div>
            <div class="list">
                <div class="item flex space-between align-items">
                    <span>订单编号</span>
                    <span>325602019011925632</span>
                </div>
                <div class="item flex space-between align-items">
                    <span>付款选择：</span>
                    <span>支付宝</span>
                </div>
                <div class="item flex space-between align-items">
                    <span>下单时间：</span>
                    <span>2019-01-22  13:55:33</span>
                </div>
            </div>
        </div>
    </div>
    <div class="detail_btn">
        <div class="btn-double" style="display:none">
            <div class="a">取消订单</div>
            <div class="b app-bg-color">去付款</div>
        </div>
        <div class="btn-double" style="display:none">
            <div class="a">申请退货</div>
            <div class="b app-bg-color">确认收货</div>
        </div>
        <div class="btn-single" style="display:none">取消申请</div>
        <div class="btn-single" style="display:none">申请退款</div>
        <div class="btn-single btn-hui" style="display:block">取消申请</div>
        <div class="btn-single app-bg-color" style="display:none">确认收货</div>
        <div class="btn-single btn-hui" style="display:none">确认收货</div>
        <div class="btn-single app-bg-color" style="display:none">评价订单</div>
        <div class="btn-single" style="display:none">删除订单</div>
    </div>
    <div class="mask"></div>
    <div class="layer">
        <div class="title">确认收货</div>
        <div class="text">确认后不可撤销</div>
        <div class="layer-textarea" style="display:block">
            <textarea id="tuiRefult" placeholder="请输入申请退款理由" ></textarea>
        </div>
        <div class="layer-btn flex align-items space-around">
            <div class="btn-left">取消</div>
            <div class="btn-right app-bg-color">确认</div>
        </div>
    </div>
</body>
<script src="../../js/jquery-3.3.1.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    function Layer(){
         
    }    


</script>
</html>